import React, { memo, useState } from 'react'
import { DemoWrapper } from './style'
import Indicator from '@/base-ui/indicator'

const Demo = memo((props) => {
  const [curIndex, setCurrentIndex] = useState(0)
  const name = ['abx', 'cbs', 'has', 'nih', 'loi', 'yuo', 'kme', 'ios']

  function controlClickHandle (toNext) {
    let newIndex = toNext ? curIndex + 1 : curIndex - 1
    if (newIndex < 0) newIndex = name.length - 1
    else if (newIndex > name.length - 1) newIndex = 0
    setCurrentIndex(newIndex)
  }

  return (
    <DemoWrapper>
      <div className="control">
        <button className="prve" onClick={e => controlClickHandle(false)}>向左</button>
        <button className="next" onClick={e => controlClickHandle(true)}>向右</button>
      </div>
      <div className="list">
        <Indicator curIndex={curIndex}>
          {
            name.map((item) => {
              return <button className="item" key={item}>{item}</button>
            })
          }
        </Indicator>
      </div>
    </DemoWrapper>
  )
})

export default Demo